<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vue 指令 v-bind</title>
</head>

<body>
    <div id="descr">
        <h1>
            v-bind 用来进行属性绑定，比较常用于 class 和 style 属性绑定，也有两种语法形式：数组和对象:
        </h1>
    </div>
    <div id="app">
        <h2>对象用法</h2>
        <div style="width: 60px; height: 60px; border: solid 1px" v-bind:class="{ active: isActive }"></div>
        <div style="width: 60px; height: 60px; border: solid 1px" class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>
        <div style="width: 60px; height: 60px; border: solid 1px" v-bind:class="classObject"></div>

        <h2>数组用法</h2>
        <div style="width: 60px; height: 60px; border: solid 1px" v-bind:class="[activeClass, errorClass]"></div>
        <div style="width: 60px; height: 60px; border: solid 1px" v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
        <div style="width: 60px; height: 60px; border: solid 1px" v-bind:class="[{ active: isActive }, errorClass]"></div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                isActive: true,
                error: null,
                hasError: false,
                classObject: {
                    active: true,
                    'text-danger': false
                },
                activeClass: 'active',
                errorClass: 'text-danger',
            },
            methods: {},
            computed: {
                classObject: function () {
                    return {
                        active: this.isActive && !this.error,
                        'text-danger': this.error && this.error.type === 'fatal'
                    }
                }
            }
        })
    </script>
</body>

</html>